import { useState, useEffect } from 'react'
import { Typography } from 'antd'

import PC from '../reposive/pc'
import Mobile from '../reposive/mobile'

import '@/styles/app-footer.css'
import '@/styles/common.css'

import Link from 'next/link'
import { Row, Col } from 'antd'

const { Text, Title } = Typography

const MiddleLinks = () => {
  const listLeft = [
    [
      { title: 'For designers' },
      { default: 'Go Pro!' },
      { default: 'Explore design work' },
      { default: 'Design blog' },
      { default: 'Overtime podcast' },
      { default: 'Dribble meetups' },
      { default: 'Playoffs' },
      { default: 'Weekly Warm-Up' },
      { default: 'Code of conduct' },
    ],
    [
      { title: 'Hire designers' },
      { default: 'Post a job opening' },
      { default: 'Post a freelance project' },
      { default: 'Search for designers' },
      { title: 'Brands' },
      { default: 'Advertise with us' },
    ],
  ]

  const listRight = [
    [
      { title: 'Company' },
      { default: 'About' },
      { default: 'Careers' },
      { default: 'Support' },
      { default: 'Media kit' },
      { default: 'Dribbblee shop' },
      { default: 'Testimonials' },
      { title: 'API' },
      { default: 'Terms of service' },
      { default: 'Privacy policy' },
    ],
    [
      { title: 'Directories' },
      { default: 'Top designers' },
      { default: 'Top design teams' },
      { default: 'Design jobs' },
      { default: 'Tags' },
      { default: 'Places' },
      { title: 'Design assets' },
      { default: 'Shop Creative Market' },
    ],
  ]

  const getOnePart = (data) => {
    let result = []

    for (let i = 0; i < data.length; i++) {
      result[i] = data[i].map((item, index) => {
        if (item.title !== undefined) {
          return (
            <Title level={5} key={i + index}>
              {item.title}
            </Title>
          )
        } else if (item.default !== undefined) {
          return (
            <Link href="" key={i + index}>
              <a style={{ margin: '5px 0' }} className="link-my-style">
                {item.default}
              </a>
            </Link>
          )
        }
      })
    }

    return (
      <>
        {/* <Link href="" key={i + index}>
              <a
                style={{ fontSize: 16, fontWeight: 'bold' }}
                className="link-my-style"
              >
                {item.title}
              </a>
            </Link> */}
        {/* <Text style={{ margin: '5px 0' }} key={i + index}> 
               {item.default} 
            </Text>  */}
        <Row>
          <Col span={12} className="common-vertical-left-default">
            {result[0]}
          </Col>
          <Col span={12} className="common-vertical-left-default">
            {result[1]}
          </Col>
        </Row>
      </>
    )
  }

  const [listLeftShow, setListLeftShow] = useState([])
  const [listRightShow, setListRightShow] = useState([])

  useEffect(() => {
    const tempLeft = getOnePart(listLeft)
    setListLeftShow(tempLeft)
    const tempRight = getOnePart(listRight)
    setListRightShow(tempRight)
  }, [])

  return (
    <>
      <Row>
        <Col span={12}>{listLeftShow}</Col>
        <Col span={12}>{listRightShow}</Col>
      </Row>
    </>
  )
}

export default MiddleLinks

// return (
//   <>
//     <div className="middle-links-style-pc">
//       <Link href="">
//         <a>MiddleLinks-1</a>
//       </Link>
//       <Link href="">
//         <a>MiddleLinks-1-1</a>
//       </Link>
//       <Link href="">
//         <a>MiddleLinks-1-2</a>
//       </Link>
//       <Link href="">
//         <a>MiddleLinks-1-3</a>
//       </Link>
//     </div>
//     <Link href="">
//       <a>MiddleLinks-2</a>
//     </Link>
//     <Link href="">
//       <a>MiddleLinks-2</a>
//     </Link>
//     <Link href="">
//       <a>MiddleLinks-2</a>
//     </Link>
//     <Link href="">
//       <a>MiddleLinks-2</a>
//     </Link>
//     <Link href="">
//       <a>MiddleLinks-3</a>
//     </Link>
//     <Link href="">
//       <a>MiddleLinks-4</a>
//     </Link>
//   </>
// )
